<template>
	<div>
		<div class="search">
			<el-form ref="form" :inline="true" :model="request" label-width="80px">
				<el-row>
					<el-col :span="8">
						<el-form-item label="订单号">
							<el-input v-model="request.param.code" @change="search" clearable placeholder="请输入订单号"></el-input>

						</el-form-item>
						<el-button @click="search">查找</el-button>
					</el-col>
					<el-col :span="8">
						<el-form-item label="手机号">
							<el-input v-model="request.param.phone" @change="search" clearable placeholder="请输入手机号"></el-input>
						</el-form-item>
						<el-button @click="search">查找</el-button>
					</el-col>

					<el-col :span="8">
						<el-form-item label="选择日期">
							<el-date-picker v-model="request.param.jdtm" clearable align="right" type="date" clearable @change="search"
							 value-format="yyyy-MM-dd" placeholder="选择日期" :picker-options="pickerOptions">
							</el-date-picker>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>

		<br>
		<div class="dataTable" width="100%">
			<el-table :data="listData.records" stripe border v-loading="loading">
				<el-table-column type="index" label="序号" width="55" fixed="left"></el-table-column>
				<el-table-column prop="rname" label="姓名"></el-table-column>
				<el-table-column prop="mnum" label="工号"></el-table-column>
				<el-table-column prop="phone" label="电话"></el-table-column>
				<el-table-column prop="eaddrs" label="子地址"></el-table-column>
				<el-table-column prop="namels" label="套餐名称"></el-table-column>
				<el-table-column prop="jdtm" label="下单时间"></el-table-column>
				<el-table-column prop="xdtm" label="接单时间"></el-table-column>
				<el-table-column prop="cost" label="定价">
				</el-table-column>
				<el-table-column prop="state" label="状态">

					<template slot-scope="scope" v-if="scope.row.state">
						<div v-if="scope.row.state==1">
							<el-tag type="warning">待接单</el-tag>
						</div>
						<div v-if="scope.row.state==2">
							<el-tag type="success">已接单</el-tag>
						</div>
						<div v-if="scope.row.state==3">
							<el-tag>已完成</el-tag>
						</div>
						<div v-if="scope.row.state==4">
							<el-tag type="danger">已拒单</el-tag>
						</div>
					</template>

				</el-table-column>

				<el-table-column label="操作" fixed="right" width="150px">
					<template slot-scope="scope">
						<div class="dataTable-operator">
							<el-button type="info" @click="toUpdate(scope.$index, scope.row)">查看菜品</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>

			<div class="pageBar">
				<el-pagination @size-change="sizeChange" @current-change="currentChange" :total="listData.total" :page-size="request.page.size"
				 :current-page="request.page.current" :layout="constant.page.layout" :page-sizes="constant.page.pageSizes"></el-pagination>
			</div>

		</div>

		<editDialog :parameter="editParameter" :isDisplay.sync="editDisplay"></editDialog>
	</div>
</template>

<script>
	import utils from 'util/utils.js';
	import validate from 'util/validate.js';
	import constant from 'util/constant.js';
	import api from 'api/order/orders/orders.js';
	import editDialog from './caipin.vue';
	export default {
		name: 'edit',
		components: {
			editDialog
		},
		data() {
			return {
				loading: false,
				show: this.isDisplay,
				request: utils.newRequest(),
				taocanlist: [],
				constant: constant,
				listData: [],
				editDisplay: false,
				editParameter: {},
				show: this.isDisplay,
				options: [{
						value: '',
						label: '午餐+晚餐'
					},
					{
						value: 1,
						label: '午餐'
					},
					{
						value: 2,
						label: '晚餐'
					}
				],
				pickerOptions: {
					disabledDate(time) {
						return time.getTime() > Date.now();
					},
					shortcuts: [{
						text: '今天',
						onClick(picker) {
							picker.$emit('pick', new Date());
						}
					}, {
						text: '昨天',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24);
							picker.$emit('pick', date);
						}
					}, {
						text: '一周前',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', date);
						}
					}]
				}
			};
		},
		methods: {
			//改变选择项
			selectionChange(val) {
				//清空
				this.request.param.ids = [];
				for (let item of val) {
					this.request.param.ids.push(item.id);
				}
			},
			//改变每页显示数量
			sizeChange(val) {
				this.request.page.size = val;
				this.list();
			},
			//改变现在的页码
			currentChange(val) {
				this.request.page.current = val;
				this.list();
			},
			//去编辑
			toUpdate(index, row) {
				this.editDisplay = true;
				this.editParameter = {
					eaddrs: row.mnum,
					fnames: row.fnames,
					sendact: row.sendact
				};
			},
			//获取数据
			list() {
				this.listLoading = true;

				api.historyJdPrint(this.request, response => {
					this.listData = response.data;
					console.log(this.listData.data)
					this.listLoading = false;
				});
			},
			//搜索
			search() {
				this.list();
			},
			init() {
				this.list();
			}
		},
		props: {
			isDisplay: {
				type: Boolean,
				default () {
					return false;
				}
			},
			parameter: {
				type: Array | Object,
				default () {
					return {};
				}
			}
		},
		mounted() {
			this.list();
		}
	};
</script>

<style lang="scss">
	@import '~common/custom/css/common.scss';
</style>
